<template>
  <div class="algorithmManagement">
    <MetaSearchForm @on-search="tableSearch">
      <el-form
        ref="algorithmManagement_form"
        :model="searchDataForTable"
        label-width="80px"
      >
        <el-form-item label="算法名称" class="algorithmManagement_searchFromItem">
          <el-input
            v-model="searchDataForTable.version"
            placeholder="请输入算法名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="创建时间" class="algorithmManagement_searchFromItem">
          <el-date-picker
            v-model="searchDataForTable.dateBetween"
            type="daterange"
            range-separator="-"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
    </MetaSearchForm>
    <MetaPageTable
      ref="algorithmManagementTable"
      class="algorithmManagement_table"
      table-title="算法管理"
      :need-checkbox="false"
      :is-auto-req="false"
      :tableData="algorithmData"
      :display-item="displayItem"
      :btn-group="btnGroup"
      :line-btn-group="lineBtnGroup"
      @btnClick="tableBtnClick"
      @lineBtnClick="tableInlineBtnClick"
      :is-manual-paging="true"
      @pageChange="pageChange"
    />
    <!-- 新版本新建算法 -->
    <el-dialog
      v-if="algorithmEditDialogFlag"
      :title="itemEditData.id && itemEditData.id !== '' ? '编辑算法' : '新建算法'"
      :visible.sync="algorithmEditDialogFlag"
      width="70%"
      modal
      center
      class="algorithmEditDialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="editDialogClose"
    >
      <el-form
        ref="algorithmInfo_form"
        :model="itemEditData"
        label-width="110px"
        :rules="editRules"
      >
        <el-form-item label="算法名称" prop="version">
          <el-input
            v-model="itemEditData.version"
            placeholder="请输入算法名称"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="算法类型"
          v-if="!(itemEditData.id && itemEditData.id !== '')"
          prop="ontype"
        >
          <el-radio label="0" v-model="itemEditData.ontype" @change="chooseMethods"
            >算法包</el-radio
          >
          <el-radio label="1" v-model="itemEditData.ontype" @change="chooseMethods"
            >指标模型</el-radio
          >
        </el-form-item>
        <el-form-item label="算法类型" v-if="itemEditData.id && itemEditData.id !== ''">
          <el-radio
            label="0"
            v-model="itemEditData.ontype"
            @change="chooseMethods"
            disabled
            >算法包</el-radio
          >
          <el-radio
            label="1"
            v-model="itemEditData.ontype"
            @change="chooseMethods"
            disabled
            >指标模型</el-radio
          >
        </el-form-item>
        <el-form-item
          v-if="itemEditData.ontype === '0'"
          label="算法包上传"
          prop="imgUpload"
        >
          <el-upload
            class="algorithmInfo_upload"
            accept=".zip"
            :headers="{
              'x-auth-token': token,
            }"
            :action="uploadUrl"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            :file-list="fileList"
            :multiple="false"
            :limit="1"
          >
            <el-button
              size="small"
              slot="trigger"
              type="primary"
              :disabled="fileList.length > 0"
              >点击上传</el-button
            >
          </el-upload>
        </el-form-item>
        <div v-if="itemEditData.ontype === '1'">
          <el-form-item
            label="参数选择"
            v-if="!(itemEditData.id && itemEditData.id !== '')"
            prop="waterParameters"
          >
            <el-select
              v-model="itemEditData.waterParameters"
              placeholder="请选择参数"
              multiple
              clearable
              style="width: 80%"
              @change="selectParam($event)"
            >
              <el-option
                v-for="item in paramsList"
                :key="item.paramkey"
                :label="item.paramname"
                :value="item.paramkey"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="参数选择" v-if="itemEditData.id && itemEditData.id !== ''">
            <el-select
              v-model="itemEditData.waterParameters"
              placeholder="请选择参数"
              multiple
              clearable
              style="width: 80%"
              disabled
            >
              <el-option
                v-for="item in paramsList"
                :key="item.paramkey"
                :label="item.paramname"
                :value="item.paramkey"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="参数模型">
            <div class="bandTitle">
              <el-tabs v-model="paramChooseItem" @tab-click="handleClick">
                <el-tab-pane
                  v-for="item in algoDetails"
                  :key="item.key"
                  :label="item.label"
                  :name="item.key"
                >
                  <span slot="label" v-if="item.choosed">
                    {{ item.label }}<i class="el-icon-check"></i
                  ></span>

                  <el-form-item>
                    <el-select
                      v-model="item.algo"
                      placeholder="请选择算法"
                      style="width: 100%"
                      filterable
                      @change="selectAlgo($event)"
                    >
                      <el-option
                        v-for="(item, index) in algoList"
                        :key="item.id"
                        :label="item.modelNickname"
                        :value="index"
                      >
                        <span style="float: left">{{ item.modelNickname }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{
                          item.modelName
                        }}</span>
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-tab-pane>
              </el-tabs>
            </div>
          </el-form-item>
        </div>

        <el-form-item label="省">
          <el-select
            v-model="itemEditData.province"
            placeholder="请选择省"
            @change="provinceHandleChange"
          >
            <el-option
              v-for="item in provinceList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="市">
          <el-select
            v-model="itemEditData.city"
            placeholder="请选择市"
            @change="cityHandleChange"
          >
            <el-option
              v-for="item in cityList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="区">
          <el-select v-model="itemEditData.area" placeholder="请选择区">
            <el-option
              v-for="item in areaList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input
            v-model="itemEditData.address"
            placeholder="请输入详细地址"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="itemEditData.remark" placeholder="请输入备注"></el-input>
        </el-form-item>
      </el-form>
      <div class="dialogFooter">
        <el-button size="mini" @click="editDialogClose()">取消</el-button>
        <el-button type="primary" size="mini" @click="editDialogSubmit()">保存</el-button>
      </div>
    </el-dialog>

    <!-- 算法迭代对话框 -->
    <el-dialog
      v-if="algoIterationDialogFlag"
      title="算法迭代"
      :visible.sync="algoIterationDialogFlag"
      width="70%"
      modal
      center
      class="algorithmEditDialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="iterationDialogClose"
    >
      <el-form
        ref="iteration_form"
        :model="itemEditData"
        label-width="110px"
        :rules="editRules"
      >
        <el-form-item label="算法名称" prop="version">
          <el-input
            v-model="itemEditData.version"
            placeholder="请输入算法名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="算法类型" prop="ontype">
          <el-radio
            label="0"
            v-model="itemEditData.ontype"
            @change="chooseMethods"
            disabled
            >算法包</el-radio
          >
          <el-radio
            label="1"
            v-model="itemEditData.ontype"
            @change="chooseMethods"
            disabled
            >指标模型</el-radio
          >
        </el-form-item>

        <el-form-item v-if="itemEditData.ontype === '0'" label="算法包上传">
          <el-upload
            class="algorithmInfo_upload"
            accept=".zip"
            :headers="{
              'x-auth-token': token,
            }"
            :action="uploadUrl"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            :file-list="fileList"
            :multiple="false"
            :limit="1"
          >
            <el-button
              size="small"
              slot="trigger"
              type="primary"
              :disabled="fileList.length > 0"
              >点击上传</el-button
            >
          </el-upload>
        </el-form-item>
        <div v-if="itemEditData.ontype === '1'">
          <el-form-item label="参数选择">
            <el-select
              v-model="itemEditData.waterParameters"
              placeholder="请选择参数"
              multiple
              clearable
              style="width: 80%"
              @change="selectParamIteration($event)"
            >
              <el-option
                v-for="item in paramsList"
                :key="item.paramkey"
                :label="item.paramname"
                :value="item.paramkey"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="参数模型">
            <div class="bandTitle">
              <el-tabs v-model="paramChooseItem" @tab-click="handleClick">
                <el-tab-pane
                  v-for="item in algoDetails"
                  :key="item.key"
                  :label="item.label"
                  :name="item.key"
                >
                  <span slot="label" v-if="item.choosed">
                    {{ item.label }}<i class="el-icon-check"></i
                  ></span>

                  <el-form-item>
                    <el-select
                      v-model="item.algo"
                      placeholder="请选择算法"
                      style="width: 100%"
                      filterable
                      @change="selectAlgo($event)"
                    >
                      <el-option
                        v-for="(item, index) in algoList"
                        :key="item.id"
                        :label="item.modelNickname"
                        :value="index"
                      >
                        <span style="float: left">{{ item.modelNickname }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{
                          item.modelName
                        }}</span>
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-tab-pane>
              </el-tabs>
            </div>
          </el-form-item>
        </div>

        <el-form-item label="省">
          <el-select
            v-model="itemEditData.province"
            placeholder="请选择省"
            @change="provinceHandleChange"
          >
            <el-option
              v-for="item in provinceList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="市">
          <el-select
            v-model="itemEditData.city"
            placeholder="请选择市"
            @change="cityHandleChange"
          >
            <el-option
              v-for="item in cityList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="区">
          <el-select v-model="itemEditData.area" placeholder="请选择区">
            <el-option
              v-for="item in areaList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input
            v-model="itemEditData.address"
            placeholder="请输入详细地址"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="itemEditData.remark" placeholder="请输入备注"></el-input>
        </el-form-item>
      </el-form>
      <div class="dialogFooter">
        <el-button size="mini" @click="iterationDialogClose()">取消</el-button>
        <el-button type="primary" size="mini" @click="iterationDialogSubmit()"
          >保存</el-button
        >
      </div>
    </el-dialog>

    <!-- 算法详情对话框 -->
    <el-dialog
      v-if="modelDetailFlag"
      title="算法模型详情"
      :visible.sync="modelDetailFlag"
      width="70%"
      modal
      center
      class="algorithmEditDialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div v-for="(item, index) in modelDetailList" :key="index" class="modelDetailStyle">
        <div style="width: 30%">{{ item.paramKey }}</div>
        <div style="width: 60%" class="modelNicknameStyle" @click="toManualPage(item)">
          {{ item.modelNickname }}
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import MetaPageTable from "../components/MetaPageTable";
import MetaSearchForm from "../components/MetaSearchForm";
import deepClone from "../utils/deepClone";
import { validateLetterNumberWord, removeWhiteSpace } from "../utils/validate";

export default {
  name: "algorithmManagement",
  components: {
    MetaPageTable,
    MetaSearchForm,
  },
  data() {
    let checkName = (rule, value, callback) => {
      removeWhiteSpace(value);
      if (!value) {
        callback(new Error("必填项不可为空"));
      } else {
        if (value.length > 50) {
          callback(new Error("内容录入过长"));
        } else if (!validateLetterNumberWord(value)) {
          callback(new Error("请准确输入名称"));
        } else {
          return callback();
        }
      }
    };

    let checkFileUrl = (rule, value, callback) => {
      if (this.$refs.imgUpload) {
        //this.$refs.imgUpload 这个打印一下就知道要的判断条件
        callback(new Error("请上传文件"));
      } else {
        callback();
      }
    };
    return {
      token: localStorage.getItem("token"),
      algorithmEditDialogFlag: false,
      algoIterationDialogFlag: false,
      changeModelFlag: true,
      algorithmData: {},
      searchData: {
        version: "",
        dateBetween: [],
      },
      searchDataForTable: {
        version: "",
        dateBetween: "",
      },
      /**
       *  门头沟的上传算法接口
       */
      // uploadUrl: 'http://121.36.99.22:8081/api/admin/algo/upload',
      uploadUrl: process.env.PROGOO_GATE_WATER + "admin/algo/upload",
      displayItem: [
        //版本，名称，算法路径，
        {
          label: "算法名称",
          prop: "version",
        },
        {
          label: "地址",
          prop: "addr",
        },
        {
          label: "算法类型",
          prop: "ontype",
          type: "if",
          format: {
            0: "算法包",
            1: "指标模型",
            null: "算法包",
          },
        },

        {
          label: "备注",
          prop: "remark",
        },
        {
          label: "创建时间",
          prop: "uploadTime",
        },
        {
          label: "文件/模型",
          prop: "tableFileName",
        },
      ],
      lineBtnGroup: [
        {
          id: "detail",
          title: "详情",
          hideCheck: this.btnHidecheck
        },
        {
          id: "edit",
          title: "编辑",
        },
        {
          id: "iteration",
          title: "迭代",
        },
        {
          id: "delete",
          title: "删除",
        },
      ],
      btnGroup: [
        {
          id: "new",
          title: "新建",
        },
      ],
      modal: {},
      itemEditData: {
        version: "",
        ontype: "0",
        province: "",
        city: "",
        area: "",
        address: "",
        remark: "",
        uploadUrl: "",
        username: localStorage.getItem("username"),
        uploadName: "",
        waterParameters: [],
      },
      editRules: {
        version: [
          {
            required: true,
            validator: checkName,
            trigger: "blur",
          },
        ],
        imgUpload: [
          {
            required: true,
            validator: checkFileUrl,
            trigger: "blur",
          },
        ],
        waterParameters: [{ required: true, message: "请选择参数", trigger: "blur" }],
        ontype: [
          {
            required: true,
            message: "请选择算法类型",
            trigger: "blur",
          },
        ],
      },
      provinceList: [],
      cityList: [],
      areaList: [],
      fileList: [],
      modelTreeList: [],
      algoList: [],
      paramChooseItem: 0,
      algoChoosed: "",
      paramsList: [],
      paramActive: "",
      paramTabList: [],
      algoDetails: [],
      tabIndex: 0,
      modelDetailFlag: false,
      modelDetailList: [],
      page: 1,
    };
  },
  mounted() {
    if (this.$route.query.searchAlgo && this.$route.query.searchAlgo !== "") {
      this.searchDataForTable.version = this.$route.query.searchAlgo;
    }
    this.initProvinceList();
    //this.getModalData();
    this.initAlgoData(1,true);
    this.getParams();
  },
  methods: {
    btnHidecheck(rowData, item) {
      if(rowData.ontype === '1'&& item.id === 'detail') {
        return true
      }
      return false
    },
    initAlgoData(page,reflash) {
      let sData = {};
      if (this.$route.params.algoName) {
        let tempAlgoName = "";
        tempAlgoName = this.$route.params.algoName;
        sData.version = tempAlgoName;
      }
      sData = this.searchDataForTable;
      sData.page = page;
      sData.limit = 10;
      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + "admin/algo",
        method: "post",
        data: sData,
      }).then((res) => {
        if (res.data.code === 200) {
            this.algorithmData = {};
            this.algorithmData.page = page;
            this.algorithmData.totalElements = res.data.result.totalElements;
            this.algorithmData.content = res.data.result.content;
            for (let i in this.algorithmData.content) {
              let addr = "";
              for (let j in this.algorithmData.content[i].areaCodes) {
                addr += this.algorithmData.content[i].areaCodes[j].name;
              }
              if (
                this.algorithmData.content[i].address &&
                this.algorithmData.content[i].address !== ""
              ) {
                addr += this.algorithmData.content[i].address;
              }
              this.algorithmData.content[i].addr = addr;
              //处理文件或者模型显示问题
              this.algorithmData.content[i].tableFileName = "";
              if (this.algorithmData.content[i].ontype == "1") {
                for (let j in this.algorithmData.content[i].models) {
                  let modelName = this.algorithmData.content[i].models[j].modelName;
                  if (this.algorithmData.content[i].tableFileName == "") {
                    this.algorithmData.content[i].tableFileName = modelName;
                  } else {
                    this.algorithmData.content[i].tableFileName += "," + modelName;
                  }
                }
              } else {
                this.algorithmData.content[i].tableFileName = this.algorithmData.content[
                  i
                ].uploadName;
              }
            }

          this.$nextTick(() => {
            this.$refs.algorithmManagementTable.formDataInit(reflash,this.algorithmData);
          });
        } else {
          this.$notify.error({
            title: "错误",
            message: res.data.message,
          });
        }
      });
    },

    getParams() {
      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + "admin/paramThreshold",
        method: "post",
        data: {
          page: 1,
          limit: 999,
        },
      }).then((res) => {
        if (res.data.code === 200) {
          this.paramsList = res.data.result.content;
          this.paramsList.reverse();
        } else {
          this.$notify.error({
            title: "错误",
            message: res.data.message,
          });
        }
      });
    },
    getAlgoList(data) {
      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + "admin/model/modelInfo",
        method: "post",
        data: {
          paramKey: data,
        },
      }).then((res) => {
        if (res.data.code === 200) {
          this.$nextTick(() => {
            this.algoList = res.data.result;
          });
        } else {
          this.$notify.error({
            title: "错误",
            message: res.data.message,
          });
        }
      });
    },
    chooseMethods(value) {
      if (value == "0") {
        this.itemEditData.ontype = "0";
      } else {
        this.itemEditData.ontype = "1";
      }
    },
    selectParam(event) {
      this.paramActive = event; //获取option对应的value值
      this.paramTabList = [];
      this.algoDetails = [];
      for (let i in this.paramsList) {
        for (let j in this.paramActive) {
          if (this.paramsList[i].paramkey === this.paramActive[j]) {
            this.paramTabList.push(this.paramsList[i]);
            break;
          }
        }
      }
      for (let k in this.paramTabList) {
        this.algoDetails.push({
          key: this.paramTabList[k].paramkey,
          label: this.paramTabList[k].paramname,
          id: "",
          algo: "",
          modelJson: "",
          choosed: false,
        });
      }
    },
    selectParamIteration(event) {
      this.paramActive = event; //获取option对应的value值
      if (this.paramActive.length > this.algoDetails.length) {
        //新增参数
        for (let i in this.paramsList) {
          if (
            this.paramsList[i].paramkey === this.paramActive[this.paramActive.length - 1]
          ) {
            this.algoDetails.push({
              key: this.paramsList[i].paramkey,
              label: this.paramsList[i].paramname,
              id: "",
              algo: "",
              modelJson: "",

              choosed: false,
            });
          }
        }
      } else if (this.paramActive.length < this.algoDetails.length) {
        //减少参数
        let tempAlgoDetails = [];
        for (let i in this.algoDetails) {
          for (let j in this.paramActive) {
            if (this.algoDetails[i].key === this.paramActive[j]) {
              tempAlgoDetails.push(this.algoDetails[i]);
            }
          }
        }
        this.algoDetails = deepClone(tempAlgoDetails);
      }
    },

    selectAlgo(index) {
      this.algoDetails[this.tabIndex].id = this.algoList[index].id;
      this.algoDetails[this.tabIndex].modelJson = this.algoList[index].modelJson;
      for (let i in this.algoDetails) {
        if (this.algoDetails[i].id !== "") {
          this.algoDetails[i].choosed = true;
        } else {
          this.algoDetails[i].choosed = false;
        }
      }
    },
    handleClick(tab) {
      this.tabIndex = tab.index;
      this.getAlgoList(tab.name);
    },
    changeModel(key, val) {
      this.changeModelFlag = false;
      this.modal[key] = val;
      this.changeModelFlag = true;
    },
    initProvinceList() {
      this.initPCAList(0, "province");
    },
    initPCAList(id, type, callback) {
      if (id === "") {
        return;
      }
      let data = {};
      if (type === "province") {
        data.level = 1;
      } else if (type === "city") {
        data.level = 2;
      } else if (type === "area") {
        data.level = 3;
      }
      data.parentid = id;
      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + "admin/company/area",
        method: "post",
        data: data,
      }).then((res) => {
        if (type === "province") {
          this.provinceList = res.data.result;
        } else if (type === "city") {
          this.cityList = res.data.result;
        } else if (type === "area") {
          this.areaList = res.data.result;
        }
        if (callback && typeof callback === "function") {
          callback();
        }
      });
    },
    provinceHandleChange(id) {
      this.cityList = [];
      this.areaList = [];
      this.itemEditData.city = "";
      this.itemEditData.area = "";
      this.initPCAList(id, "city");
    },
    cityHandleChange(id) {
      this.areaList = [];
      this.itemEditData.area = "";
      this.initPCAList(id, "area");
    },
    pageChange(e) {
      this.page = e
      this.initAlgoData(this.page, false);
    },
    tableInlineBtnClick(item) {
      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + "admin/algo/models",
        method: "post",
        data: {
          id: item.rows.id,
          page: 1,
          limit: 999,
        },
      }).then((res) => {
        if (res.data.code === 200) {
          this.modelDetailList = res.data.result.content;
          if (item.button === "detail") {
            this.modelDetailFlag = true;
          } else if (item.button === "edit") {
            this.itemEditData = {
              id: item.rows.id,
              ontype:
                item.rows.ontype && item.rows.ontype !== "" ? item.rows.ontype : "0",
              version: item.rows.version,
              province: item.rows.province ? parseInt(item.rows.province) : "",
              city: item.rows.city ? parseInt(item.rows.city) : "",
              area: item.rows.areaid ? parseInt(item.rows.areaid) : "",
              tel: item.rows.tel ? item.rows.tel : "",
              address: item.rows.address ? item.rows.address : "",
              remark: item.rows.remark ? item.rows.remark : "",
              uploadUrl: item.rows.uploadUrl ? item.rows.uploadUrl : "",
              uploadName: item.rows.uploadName ? item.rows.uploadName : "",
              username: item.rows.username ? item.rows.username : localStorage.getItem("username"),
            };
            if (item.rows.ontype === "1") {
              //指标模型
              for (let i in item.rows.models) {
                this.modal[item.rows.models[i].paramKey] = item.rows.models[i].id;
              }
              this.algorithmEditDialogFlag = true;
              this.itemEditData.waterParameters = [];
              for (let i in this.modelDetailList) {
                let item = {};
                item = this.modelDetailList[i].paramKey;
                this.itemEditData.waterParameters.push(item);
              }
              this.algoDetails = [];
              for (let i in this.modelDetailList) {
                let item = {};
                item.id = this.modelDetailList[i].id;
                item.choosed = true;
                item.algo = this.modelDetailList[i].modelNickname;
                item.modelJson = this.modelDetailList[i].modelJson;

                item.key = this.modelDetailList[i].paramKey;
                for (let l in this.paramsList) {
                  if (this.paramsList[l].paramkey === this.modelDetailList[i].paramKey) {
                    item.label = this.paramsList[l].paramname;
                  }
                }
                this.algoDetails.push(item);
              }
            } else {
              //算法包上传
              this.fileList = [];
              if (this.itemEditData.uploadUrl && this.itemEditData.uploadUrl !== "") {
                let file = {};
                file.name =
                  this.itemEditData.uploadName && this.itemEditData.uploadName !== ""
                    ? this.itemEditData.uploadName
                    : this.itemEditData.version;
                file.url = this.itemEditData.uploadUrl;
                file.response = this.itemEditData.uploadUrl;
                this.fileList.push(file);
              }
            }
            this.cityList = [];
            this.areaList = [];
            this.initPCAList(this.itemEditData.province, "city", () => {
              this.initPCAList(this.itemEditData.city, "area");
            });
            this.algorithmEditDialogFlag = true;
            this.algoIterationDialogFlag = false;
          } else if (item.button === "iteration") {
            this.itemEditData = {
              id: item.rows.id,
              ontype:
                item.rows.ontype && item.rows.ontype !== "" ? item.rows.ontype : "0",
              version: item.rows.version,
              province: item.rows.province ? parseInt(item.rows.province) : "",
              city: item.rows.city ? parseInt(item.rows.city) : "",
              area: item.rows.areaid ? parseInt(item.rows.areaid) : "",
              tel: item.rows.tel ? item.rows.tel : "",
              address: item.rows.address ? item.rows.address : "",
              remark: item.rows.remark ? item.rows.remark : "",
              uploadUrl: item.rows.uploadUrl ? item.rows.uploadUrl : "",
              uploadName: item.rows.uploadName ? item.rows.uploadName : "",
            };
            if (item.rows.ontype === "1") {
              //指标模型
              for (let i in item.rows.models) {
                this.modal[item.rows.models[i].paramKey] = item.rows.models[i].id;
              }
              this.algorithmEditDialogFlag = true;
              this.itemEditData.waterParameters = [];
              for (let i in this.modelDetailList) {
                let item = {};
                item = this.modelDetailList[i].paramKey;
                this.itemEditData.waterParameters.push(item);
              }
              this.algoDetails = [];
              for (let i in this.modelDetailList) {
                let item = {};
                item.id = this.modelDetailList[i].id;
                item.choosed = true;
                item.algo = this.modelDetailList[i].modelNickname;
                item.modelJson = this.modelDetailList[i].modelJson;

                item.key = this.modelDetailList[i].paramKey;
                for (let l in this.paramsList) {
                  if (this.paramsList[l].paramkey === this.modelDetailList[i].paramKey) {
                    item.label = this.paramsList[l].paramname;
                  }
                }
                this.algoDetails.push(item);
              }
            } else {
              //算法包上传
              this.fileList = [];
              if (this.itemEditData.uploadUrl && this.itemEditData.uploadUrl !== "") {
                let file = {};
                file.name =
                  this.itemEditData.uploadName && this.itemEditData.uploadName !== ""
                    ? this.itemEditData.uploadName
                    : this.itemEditData.version;
                file.url = this.itemEditData.uploadUrl;
                file.response = this.itemEditData.uploadUrl;
                this.fileList.push(file);
              }
            }
            this.cityList = [];
            this.areaList = [];
            this.initPCAList(this.itemEditData.province, "city", () => {
              this.initPCAList(this.itemEditData.city, "area");
            });
            this.algoIterationDialogFlag = true;
            this.algorithmEditDialogFlag = false;
          } else if (item.button === "delete") {
            this.$confirm("确认删除当前算法？", "确认删除?", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }).then(() => {
              this.$fetch({
                url: process.env.PROGOO_GATE_WATER + "admin/content/algo/" + item.rows.id,
                method: "delete",
                data: {
                  id: item.rows.id,
                },
              }).then((res) => {
                if (res.data.code === 200) {
                  this.$message({
                    type: "success",
                    message: "操作成功!",
                  });
                  this.initAlgoData(this.page,true);
                } else {
                  this.$notify.error({
                    title: "错误",
                    message: res.data.message,
                  });
                }
              });
            });
          }
        } else {
        }
      });
    },
    tableBtnClick(item) {
      if (item.button === "new") {
        for (let key in this.modal) {
          this.modal[key] = "";
        }
        this.itemEditData = {
          version: "",
          province: "",
          ontype: "0",
          city: "",
          area: "",
          address: "",
          remark: "",
          uploadName: "",
          uploadUrl: "",
          username: localStorage.getItem("username")
        };
        this.fileList = [];
        this.algorithmEditDialogFlag = true;
      }
    },
    editDialogSubmit() {
      this.$refs["algorithmInfo_form"].validate((valid) => {
        if (valid) {
          if (this.itemEditData.ontype === "1") {
            for (let i in this.algoDetails) {
              if (this.algoDetails[i].id == "") {
                this.$notify({
                  title: "警告",
                  message: "请选择完整算法模型",
                  type: "warning",
                });
                return;
              } else {
              }
            }
          }
          let params = {};
          if (this.itemEditData.id && this.itemEditData.id !== "") {
            params.id = this.itemEditData.id;
          }
          params.username = this.itemEditData.username;
          params.version = this.itemEditData.version.trim();
          params.province = this.itemEditData.province;
          params.ontype = this.itemEditData.ontype;
          params.city = this.itemEditData.city;
          params.areaid = this.itemEditData.area;
          params.address = this.itemEditData.address;
          params.remark = this.itemEditData.remark;
          if (params.ontype == "0") {
            //选择算法包
            if (this.fileList.length > 0) {
              params.uploadName = this.fileList[0].name;
              params.uploadUrl = this.fileList[0].response;
            }
          } else {
            //选择指标模型
            let model_json = [];
            for (let i in this.itemEditData.waterParameters) {
              let item = {};
              item.key = this.itemEditData.waterParameters[i];
              item.model = "";
              model_json.push(item);
            }
            // for (let i in model_json) {
            //   model_json[i].model = this.algoDetails[i].modelJson;
            // }
            params.model_json = JSON.stringify(model_json);
            let models = [];
            for (let i in this.algoDetails) {
              let item = {};
              item.id = this.algoDetails[i].id;
              models.push(item);
            }
            params.models = models;
          }
          this.$fetch({
            url: process.env.PROGOO_GATE_WATER + "admin/algo/edit",
            method: "post",
            data: params,
          }).then((res) => {
            if (res.data.code === 200) {
              this.initAlgoData(this.page,false);
              this.$notify({
                title: "成功",
                message: "操作成功",
                type: "success",
              });
              this.editDialogClose();
            } else {
              this.$notify.error({
                title: "错误",
                message: res.data.message,
              });
            }
          });
        } else {
          return false;
        }
      });
    },
    editDialogClose() {
      for (let key in this.modal) {
        this.modal[key] = "";
      }
      this.itemEditData = {
        id: "",
        version: "",
        province: "",
        city: "",
        area: "",
        address: "",
        remark: "",
        waterParameters: [],
        username: localStorage.getItem("username")
      };
      this.algoDetails = [];
      this.algorithmEditDialogFlag = false;
    },
    iterationDialogSubmit() {
      this.$refs["iteration_form"].validate((valid) => {
        if (valid) {
          if (this.itemEditData.ontype === "1") {
            for (let i in this.algoDetails) {
              if (this.algoDetails[i].id == "") {
                this.$notify({
                  title: "警告",
                  message: "请选择完整算法模型",
                  type: "warning",
                });
                return;
              } else {
              }
            }
          }
          let params = {};
          params.username = this.itemEditData.username;
          params.version = this.itemEditData.version;
          params.province = this.itemEditData.province;
          params.ontype = this.itemEditData.ontype;
          params.city = this.itemEditData.city;
          params.areaid = this.itemEditData.area;
          params.address = this.itemEditData.address;
          params.remark = this.itemEditData.remark;
          if (params.ontype == "0") {
            //选择算法包
            if (this.fileList.length > 0) {
              params.uploadName = this.fileList[0].name;
              params.uploadUrl = this.fileList[0].response;
            }
          } else {
            //选择指标模型
            let model_json = [];
            for (let i in this.itemEditData.waterParameters) {
              let item = {};
              item.key = this.itemEditData.waterParameters[i];
              item.model = "";
              model_json.push(item);
            }
            // for (let i in model_json) {
            //   model_json[i].model = this.algoDetails[i].modelJson;
            // }
            params.model_json = JSON.stringify(model_json);
            let models = [];
            for (let i in this.algoDetails) {
              let item = {};
              item.id = this.algoDetails[i].id;
              models.push(item);
            }
            params.models = models;
          }
          this.$fetch({
            url: process.env.PROGOO_GATE_WATER + "admin/algo/edit",
            method: "post",
            data: params,
          }).then((res) => {
            if (res.data.code === 200) {
              if (res.data.result === "算法名称相同") {
                this.$notify.warning({
                  title: "算法重名",
                  message: "请修改算法名称",
                });
              } else {
                this.initAlgoData(this.page,false);
                this.iterationDialogClose();
                this.$notify({
                  title: "成功",
                  message: "算法迭代成功",
                  type: "success",
                });
              }
            } else {
              this.$notify.error({
                title: "错误",
                message: res.data.message,
              });
            }
          });
        } else {
          return false;
        }
      });
    },

    iterationDialogClose() {
      for (let key in this.modal) {
        this.modal[key] = "";
      }
      this.itemEditData = {
        id: "",
        version: "",
        province: "",
        city: "",
        area: "",
        address: "",
        remark: "",
        username: localStorage.getItem("username"),
        waterParameters: [],
      };
      this.algoDetails = [];
      this.algoIterationDialogFlag = false;
    },
    tableSearch() {
      let param = {};
      for (let key in this.searchDataForTable) {
        if (key === "dateBetween") {
          param.datestart =
            this.searchDataForTable[key] && this.searchDataForTable[key].length > 0
              ? this.searchDataForTable[key][0] + " 00:00:00"
              : "";
          param.dateend =
            this.searchDataForTable[key] && this.searchDataForTable[key].length > 0
              ? this.searchDataForTable[key][1] + " 23:59:59"
              : "";
        } else {
          param[key] = this.searchDataForTable[key];
        }
      }
      this.searchDataForTable = param;
      this.initAlgoData(this.page,true);
    },
    handleRemove(file, fileList) {
      this.fileList = fileList;
    },
    handleSuccess(response, file, fileList) {
      this.fileList = fileList;
    },
    toManualPage(e) {
      if (e.buildType == "auto") {
        this.$router.push({
          name: "modelOptimization",
          params: {
            modelTempId: e.modelTempId,
            equipmentId: e.equipmentId,
          },
        });
      } else if (e.buildType == "manual") {
        this.$router.push({
          name: "dataConfigure",
          params: {
            modelTempId: e.modelTempId,
            equipmentId: e.equipmentId,
          },
        });
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
.algorithmManagement {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 15px;
  overflow-y: scroll;
  .algorithmManagement_table {
    width: 100%;
    overflow-y: unset;
  }
  .dialogFooter {
    display: flex;
    justify-content: center;
    margin-top: 0.5rem;
  }
  .roleChooseSelect {
    width: 100%;
  }
  .algorithmManagement_searchFromItem {
    float: left;
  }
  .modelChooseTitle {
    width: 100%;
    height: 40px;
    line-height: 40px;
    float: left;
  }
  .modelChoose_radioGroup {
    width: 100%;
    float: left;
  }
  .modelChoose_radio {
    box-sizing: border-box;
    float: left;
    padding: 0 10px;
    cursor: pointer;
    border: 1px solid #c1c1c1;
    border-radius: 3px;
    height: 32px;
    line-height: 32px;
    margin-right: 8px;
    margin-bottom: 10px;
  }
  .modelChoose_radio_o {
    box-sizing: border-box;
    float: left;
    padding: 0 10px;
    cursor: pointer;
    color: #409eff;
    border: 1px solid #409eff;
    border-radius: 3px;
    height: 32px;
    line-height: 32px;
    margin-right: 8px;
    margin-bottom: 10px;
  }
  .algorithmEditDialog .el-form {
    height: 500px !important;
    overflow-y: scroll !important;
  }
  .modelDetailStyle {
    width: 100%;
    display: flex;
    flex-direction: row;
    font-size: 16px;
    line-height: 35px;
    .modelNicknameStyle {
      width: 60%;
      cursor: pointer;
      color: #409eff;
      text-decoration: underline;
    }
  }
}
</style>
